<template>
    <div class="leftRight">
        <div class="left">
                <div class="login-header">
                    <a class="login-logo">
                        <img src="../assets/sixiongLogo.png" alt="">
                    </a>
                    <span class="login-text lan ">F I R M</span>
                    <h2 class="  dltxt2 lan ">&nbsp;&nbsp;&nbsp; FBR Integrated  Rope  Management</h2>
                </div>
                    
                <h2 class="lan  b dltxt tc">欢 迎 登 录 系 统</h2>
                <p class="colb3 tc dltxt2">WELCOME TO THE SYSTEM</p>
                <div class="input_wrapper">
                    <input name="TextBox1" type="text" id="TextBox1" class="dlinput" placeholder="请输入用户名" autocomplete="off">
                    <input name="TextBox2" type="password" id="TextBox2" class="dlinput mv20" placeholder="请输入登录密码" autocomplete="off">
                </div>
                
                <div class="flex-start align-center pl25 pt20 pb40">
                    
                </div>
                <input type="submit" name="btnLogin" value="立即登录" id="btnLogin" class="btnhover dlbtn flex-column2 align-center">
                <!-- <button class="dlbtn flex-column2 align-center">立即登录</button> -->
          
        </div>
        <div class="right">
            <!-- <img src="../assets/login_ship.png"> -->
        </div>
    </div>
    
</template>
<script>
</script>

<style>

    .leftRight{
        display: flex;
        height: 100%;
    }
    img{
        height: 100%;
    }
    .left{
        width: 55%;
        padding: 20px;
    }
    .right{
        height: 100%;
        width: 100%;
        background: url(../assets/login_ship.png) no-repeat right bottom;
        background-size: 100% 100%;
    }
    .login-header {
        /* margin-left: 1px; */
        text-align: left;
        margin-left: 40px;
        margin-bottom: 60px;
    }
    .login-header .login-logo {
        display: inline-block;
        vertical-align: top;
        line-height: 40px;
        margin: 20px 20px;
        width: 30%;
    }
    .login-header .login-logo img{
        width: 100%;
        height:100%;
    }
    .login-header span {
        display: inline-block;
        vertical-align: top;
        font-size: 40px;
        font-weight: 600;
        line-height: 40px;
        margin: 20px 20px;
    }
    .input_wrapper{
        margin:  30px auto;
        width: 90%;
    }
    .lan {
        color: #002F9F;
    }
    .dltxt2 {
        font-size: 22px;
    
    }
    .dltxt {
        font-size: 35px;
    }
    .tc {
        text-align: center !important;
    }
    .b {
        font-weight: bold !important;
        padding-top: 30px;
    }
    .colb3 {
        color: #b3b3b3;
    }
    .dlinput {
        border: none;
        background: #F6F7FB;
        border-radius: 36px;
        height: 36px;
        box-sizing: border-box;
        width: 100%;
        padding: 0 60px;
        font-size: 20px;
        color: #333;
    }
    input, button, textarea {
        outline: none;
        font-family: "\5FAE\8F6F\96C5\9ED1";
    }
    button, input {
        vertical-align: middle;
        outline: none;
    }
    .mv20 {
        margin: 20px 0;
    }
    .dlmbox {
        background: #F6F7FB;
        border-radius: 32px;
        position: relative;
    }
    .flex-between {
        display: flex;
        justify-content: space-between;
    }
    .dlbtn {
        margin: 0 auto;
        width: 90%;
        border-radius: 26px;
        display: block;
        border: none;
        cursor: pointer;
        background: #002F9F;
        height: 48px;
        color: #fff;
        box-shadow: 2px 8px 9px 0px rgba(138, 138, 138, 0.12);
        font-size: 24px;
        font-weight: bold;
    }
</style>